﻿@using Samples.Shared.Models
@using OpenAPI.Net.Helpers;
@using System.Globalization;
@inject IJSRuntime JS
@using Samples.Shared.Services

<Modal @ref="Modal" ShowCloseButton="true" OnClose="OnClose">
    <Title>
        <h5 class="modal-title text-white" id="orderModalTitle">@Title</h5>
    </Title>
    <Body>
        <ul class="nav nav-tabs" id="orderModalTab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link text-muted" id="marketOrderTab" data-bs-toggle="tab" data-bs-target="#marketOrderTabContent" type="button" role="tab" aria-controls="marketOrderTabContent" aria-selected="true" @onclick="MarketOrderTabActivated">Market</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link text-muted" id="pendingOrderTab" data-bs-toggle="tab" data-bs-target="#pendingOrderTabContent" type="button" role="tab" aria-controls="pendingOrderTabContent" aria-selected="false" @onclick="PendingOrderTabActivated">Pending</button>
            </li>
        </ul>
        <div class="tab-content m-0 p-2" id="orderModalTabContent">
            <div class="tab-pane fade show active" id="marketOrderTabContent" role="tabpanel" aria-labelledby="marketOrderTab">
                <div class="row no-gutters text-white form-group">
                    <div class="col">
                        <label for="marketOrderSymbolsList">Symbol</label>
                        <select id="marketOrderSymbolsList" class="form-select" @onchange="MarketOrderSymbolChanged">
                            @if (Account is not null)
                            {
                                foreach (var symbol in Account.Symbols)
                                {
                                    <option value="@symbol.Name" id="@symbol.Id">@symbol.Name</option>
                                }
                            }
                        </select>
                    </div>
                    <div class="col">
                        <label for="marketOrderSymbolsList">Direction</label>
                        <select id="marketOrderDirectionList" class="form-select" @onchange="MarketOrderDirectionChanged">
                            <option value="Buy">Buy</option>
                            <option value="Sell">Sell</option>
                        </select>
                    </div>
                </div>
                <div class="row no-gutters text-white form-group">
                    <div class="col">
                        <label for="marketOrderVolumeInput">Volume (Units)</label>
                        <input type="number" class="form-control" id="marketOrderVolumeInput" @onchange="MarketOrderVolumeChanged" oninput="isNumberInRange(this)" onkeypress="return isNumeric(event)" min="0">
                    </div>
                    <div class="col">
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" id="marketRange" @onchange="MarketOrderMarketRangeStateChanged">
                            <label class="form-check-label" for="marketRange">Market Range</label>
                        </div>
                        <div class="row">
                            <div class="col">
                                <input type="number" class="form-control" id="marketRangeInput" @onchange="MarketOrderMarketRangeChanged" value="10" min="1" step="1" oninput="isNumberInRange(this)" onkeypress="return isNumeric(event)" disabled>
                            </div>
                            <div class="col-2 p-1">
                                <label>Pips</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row no-gutters text-white form-group">
                    <div class="col">
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" id="marketOrderStopLoss" @onchange="MarketOrderStopLossStateChanged">
                            <label class="form-check-label" for="marketOrderStopLoss">Stop Loss</label>
                        </div>
                        <div class="row">
                            <div class="col">
                                <input type="number" class="form-control" id="marketOrderStopLossInput" @onchange="MarketOrderStopLossChanged" value="20" min="1" step="1" oninput="isNumberInRange(this)" onkeypress="return isNumeric(event)" disabled>
                            </div>
                            <div class="col-2 p-1">
                                <label for="marketOrderStopLossInput">Pips</label>
                            </div>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" id="marketOrderTrailingStopLoss" @onchange="MarketOrderTrailingStopChanged" disabled>
                            <label class="form-check-label" for="marketOrderTrailingStopLoss">Trailing Stop</label>
                        </div>
                    </div>
                    <div class="col">
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" id="marketOrderTakeProfit" @onchange="MarketOrderTakeProfitStateChanged">
                            <label class="form-check-label" for="marketOrderTakeProfit">Take Profit</label>
                        </div>
                        <div class="row">
                            <div class="col">
                                <input type="number" class="form-control" id="marketOrderTakeProfitInput" @onchange="MarketOrderTakeProfitChanged" value="20" min="1" step="1" oninput="isNumberInRange(this)" onkeypress="return isNumeric(event)" disabled>
                            </div>
                            <div class="col-2 p-1">
                                <label for="marketOrderTakeProfitInput">Pips</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="text-white form-group">
                    <textarea class="form-control" maxlength="100" id="marketOrderCommentTextarea" @onchange="MarketOrderCommentChanged" rows="3" placeholder="Comment..."></textarea>
                </div>
            </div>
            <div class="tab-pane fade m-0 p-0" id="pendingOrderTabContent" role="tabpanel" aria-labelledby="pendingOrderTab">
                <div class="row no-gutters text-white form-group">
                    <div class="col">
                        <label for="pendingOrderSymbolsList">Symbol</label>
                        <select id="pendingOrderSymbolsList" class="form-select" @onchange="PendingOrderSymbolChanged">
                            @if (Account is not null)
                            {
                                foreach (var symbol in Account.Symbols)
                                {
                                    <option value="@symbol.Name" id="@symbol.Id">@symbol.Name</option>
                                }
                            }
                        </select>
                    </div>
                    <div class="col">
                        <label for="pendingOrderSymbolsList">Direction</label>
                        <select id="pendingOrderDirectionList" class="form-select" @onchange="PendingOrderDirectionChanged">
                            <option value="Buy">Buy</option>
                            <option value="Sell">Sell</option>
                        </select>
                    </div>
                </div>
                <div class="row no-gutters text-white form-group">
                    <div class="col">
                        <label for="pendingOrderTypeList">Type</label>
                        <select id="pendingOrderTypeList" class="form-select" @onchange="PendingOrderTypeChanged">
                            <option value="Limit">Limit</option>
                            <option value="Stop">Stop</option>
                            <option value="StopLimit">Stop Limit</option>
                        </select>
                    </div>
                </div>
                <div class="row no-gutters text-white form-group">
                    <div class="col">
                        <label for="pendingOrderVolumeInput">Volume (Units)</label>
                        <input type="number" class="form-control" id="pendingOrderVolumeInput" @onchange="PendingOrderVolumeChanged" oninput="isNumberInRange(this)" onkeypress="return isNumeric(event)" min="0">
                    </div>
                    <div class="col">
                        <label for="pendingOrderPriceInput">Target Price</label>
                        <input type="number" class="form-control" id="pendingOrderPriceInput" @onchange="PendingOrderPriceChanged" value="0" onkeypress="return isNumeric(event)" min="0">
                    </div>
                </div>
                <div class="row no-gutters text-white form-group">
                    <div class="col">
                        <label for="pendingOrderLimitRangeInput">Limit Range (Pips)</label>
                        <input type="number" class="form-control" id="pendingOrderLimitRangeInput" @onchange="PendingOrderLimitRangeChanged" onkeypress="return isNumeric(event)" min="0" value="10" disabled>
                    </div>
                    <div class="col">
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" id="pendingOrderExpiry" @onchange="PendingOrderExpiryStateChanged">
                            <label class="form-check-label" for="pendingOrderExpiry">Expiry</label>
                        </div>
                        <input type="datetime-local" id="pendingOrderExpiryDateTime" @onchange="PendingOrderExpiryChanged" class="form-control" disabled>
                    </div>
                </div>
                <div class="row no-gutters text-white form-group">
                    <div class="col">
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" id="pendingOrderStopLoss" @onchange="PendingOrderStopLossStateChanged">
                            <label class="form-check-label" for="pendingOrderStopLoss">Stop Loss</label>
                        </div>
                        <div class="row">
                            <div class="col">
                                <input type="number" class="form-control" id="pendingOrderStopLossInput" @onchange="PendingOrderStopLossChanged" value="20" min="1" step="1" oninput="isNumberInRange(this)" onkeypress="return isNumeric(event)" disabled>
                            </div>
                            <div class="col-2 p-1">
                                <label for="pendingOrderStopLossInput">Pips</label>
                            </div>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" id="pendingOrderTrailingStopLoss" @onchange="PendingOrderTrailingStopChanged" disabled>
                            <label class="form-check-label" for="pendingOrderTrailingStopLoss">Trailing Stop</label>
                        </div>
                    </div>
                    <div class="col">
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" id="pendingOrderTakeProfit" @onchange="PendingOrderTakeProfitStateChanged">
                            <label class="form-check-label" for="pendingOrderTakeProfit">Take Profit</label>
                        </div>
                        <div class="row">
                            <div class="col">
                                <input type="number" class="form-control" id="pendingOrderTakeProfitInput" @onchange="PendingOrderTakeProfitChanged" value="20" min="1" step="1" oninput="isNumberInRange(this)" onkeypress="return isNumeric(event)" disabled>
                            </div>
                            <div class="col-2 p-1">
                                <label for="pendingOrderTakeProfitInput">Pips</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="text-white form-group">
                    <textarea class="form-control" maxlength="100" id="pendingOrderCommentTextarea" rows="3" placeholder="Comment... " @onchange="PendingOrderCommentChanged"></textarea>
                </div>
            </div>
        </div>
    </Body>
    <Footer>
        <button type="button" class="btn btn-primary" id="orderModalButton" @onclick="Execute">@ButtonText</button>
    </Footer>
</Modal>

@code {

    private bool _isMarketTabActive;

    private MarketOrderModel _actualMarketOrder;

    private PendingOrderModel _actualPendingOrder;

    [Parameter]
    public AccountModel Account { get; set; }

    public Modal Modal { get; set; }

    public string Title { get; set; }

    public string ButtonText { get; set; }

    public bool IsModifying { get; set; }

    public SymbolModel Symbol { get; set; }

    public MarketOrderModel MarketOrder { get; set; }

    public PendingOrderModel PendingOrder { get; set; }

    public bool ShowPendingOrderTab { get; set; }

    [Inject]
    private IOpenApiService ApiService { get; set; }

    public async Task Open()
    {
        if (IsModifying is false)
        {
            if (PendingOrder is null)
            {
                PendingOrder = new PendingOrderModel
                {
                    Symbol = Symbol,
                    Volume = Symbol.Data.MinVolume,
                    TradeSide = ProtoOATradeSide.Buy
                };
            }
            else
            {
                PendingOrder.Symbol = Symbol;
                PendingOrder.Volume = Symbol.Data.MinVolume;
            }

            if (MarketOrder is null)
            {
                MarketOrder = new MarketOrderModel
                {
                    Symbol = Symbol,
                    Volume = Symbol.Data.MinVolume,
                    TradeSide = ProtoOATradeSide.Buy
                };
            }
            else
            {
                MarketOrder.Symbol = Symbol;
                MarketOrder.Volume = Symbol.Data.MinVolume;
            }
        }
        else
        {
            if (MarketOrder is not null)
            {
                _actualMarketOrder = MarketOrder;

                MarketOrder = _actualMarketOrder.Clone();
            }

            if (PendingOrder is not null)
            {
                _actualPendingOrder = PendingOrder;

                PendingOrder = _actualPendingOrder.Clone();
            }
        }

        await SetInputsValues();

        await JS.InvokeVoidAsync("hideTab", "#pendingOrderTab");
        await JS.InvokeVoidAsync("hideTab", "#marketOrderTab");

        if (ShowPendingOrderTab)
        {
            await JS.InvokeVoidAsync("showTab", "#pendingOrderTab");

            _isMarketTabActive = false;
        }
        else
        {
            await JS.InvokeVoidAsync("showTab", "#marketOrderTab");

            _isMarketTabActive = true;
        }

        if (PendingOrder is null)
        {
            await JS.InvokeVoidAsync("disableTab", "#pendingOrderTab");

        }
        else
        {
            await JS.InvokeVoidAsync("enableTab", "#pendingOrderTab");
        }

        if (MarketOrder is null)
        {
            await JS.InvokeVoidAsync("disableTab", "#marketOrderTab");

        }
        else
        {
            await JS.InvokeVoidAsync("enableTab", "#marketOrderTab");
        }

        await Modal.Open();
    }

    public async Task Close()
    {
        await Modal.Close();
    }

    private async Task PendingOrderSymbolChanged(ChangeEventArgs e)
    {
        if (e.Value is null) return;

        var symbolName = e.Value.ToString();

        var symbol = Account.Symbols.FirstOrDefault(symbol => symbol.Name.Equals(symbolName, StringComparison.OrdinalIgnoreCase));

        if (symbol is not null)
        {
            PendingOrder.Symbol = symbol;
            PendingOrder.Volume = PendingOrder.Symbol.Data.MinVolume;
            PendingOrder.Price = symbol.Bid;

            await UpdateVolumeInputAttributes("#pendingOrderVolumeInput", symbol);
            await JS.InvokeVoidAsync("setInputValue", "#pendingOrderVolumeInput", MonetaryConverter.FromMonetary(PendingOrder.Volume));
            await JS.InvokeVoidAsync("setInputValue", "#pendingOrderPriceInput", PendingOrder.Price);

        }
    }

    private void PendingOrderPriceChanged(ChangeEventArgs e)
    {
        if (e.Value is null || PendingOrder is null) return;

        PendingOrder.Price = double.Parse(e.Value.ToString(), NumberStyles.Any, CultureInfo.InvariantCulture);
    }

    private async Task PendingOrderTypeChanged(ChangeEventArgs e)
    {
        if (e.Value is null || PendingOrder is null) return;

        PendingOrder.ProtoType = e.Value.ToString().ToLowerInvariant() switch
        {
            "limit" => ProtoOAOrderType.Limit,
            "stop" => ProtoOAOrderType.Stop,
            "stoplimit" => ProtoOAOrderType.StopLimit,
            _ => throw new ArgumentOutOfRangeException(e.Value.ToString())
        };

        if (PendingOrder.ProtoType == ProtoOAOrderType.StopLimit)
        {
            await JS.InvokeVoidAsync("enableInput", "#pendingOrderLimitRangeInput");
        }
        else
        {
            await JS.InvokeVoidAsync("disableInput", "#pendingOrderLimitRangeInput");
        }
    }

    private void PendingOrderDirectionChanged(ChangeEventArgs e)
    {
        if (e.Value is null || PendingOrder is null) return;

        PendingOrder.TradeSide = e.Value.ToString().ToLowerInvariant() switch
        {
            "buy" => ProtoOATradeSide.Buy,
            "sell" => ProtoOATradeSide.Sell,
            _ => throw new ArgumentOutOfRangeException(e.Value.ToString())
        };
    }

    private void PendingOrderVolumeChanged(ChangeEventArgs e)
    {
        if (e.Value is null || PendingOrder is null) return;

        PendingOrder.Volume = MonetaryConverter.ToMonetary(double.Parse(e.Value.ToString(), NumberStyles.Any, CultureInfo.InvariantCulture));
    }

    private void PendingOrderLimitRangeChanged(ChangeEventArgs e)
    {
        if (e.Value is null || PendingOrder is null) return;

        PendingOrder.LimitRangeInPips = double.Parse(e.Value.ToString(), NumberStyles.Any, CultureInfo.InvariantCulture);
    }

    private async Task PendingOrderExpiryStateChanged(ChangeEventArgs e)
    {
        if (e.Value is null || PendingOrder is null) return;

        PendingOrder.IsExpiryEnabled = bool.Parse(e.Value.ToString());

        if (PendingOrder.IsExpiryEnabled)
        {
            await JS.InvokeVoidAsync("enableInput", "#pendingOrderExpiryDateTime");
        }
        else
        {
            await JS.InvokeVoidAsync("disableInput", "#pendingOrderExpiryDateTime");
        }
    }

    private void PendingOrderExpiryChanged(ChangeEventArgs e)
    {
        if (e.Value is null || PendingOrder is null) return;

        if (DateTimeOffset.TryParse(e.Value.ToString(), CultureInfo.InvariantCulture, DateTimeStyles.AssumeLocal, out var expiryTime))
        {
            PendingOrder.ExpiryTime = expiryTime;
        }
    }

    private async Task PendingOrderStopLossStateChanged(ChangeEventArgs e)
    {
        if (e.Value is null || PendingOrder is null) return;

        PendingOrder.IsStopLossEnabled = bool.Parse(e.Value.ToString());

        if (PendingOrder.IsStopLossEnabled)
        {
            await JS.InvokeVoidAsync("enableInput", "#pendingOrderStopLossInput");
            await JS.InvokeVoidAsync("enableInput", "#pendingOrderTrailingStopLoss");
        }
        else
        {
            await JS.InvokeVoidAsync("disableInput", "#pendingOrderStopLossInput");
            await JS.InvokeVoidAsync("disableInput", "#pendingOrderTrailingStopLoss");

        }
    }

    private void PendingOrderStopLossChanged(ChangeEventArgs e)
    {
        if (e.Value is null || PendingOrder is null) return;

        PendingOrder.StopLossInPips = double.Parse(e.Value.ToString(), NumberStyles.Any, CultureInfo.InvariantCulture);
        PendingOrder.StopLossInPrice = default;
    }

    private void PendingOrderTrailingStopChanged(ChangeEventArgs e)
    {
        if (e.Value is null || PendingOrder is null) return;

        PendingOrder.IsTrailingStopLossEnabled = bool.Parse(e.Value.ToString());
    }

    private async Task PendingOrderTakeProfitStateChanged(ChangeEventArgs e)
    {
        if (e.Value is null || PendingOrder is null) return;

        PendingOrder.IsTakeProfitEnabled = bool.Parse(e.Value.ToString());

        if (PendingOrder.IsTakeProfitEnabled)
        {
            await JS.InvokeVoidAsync("enableInput", "#pendingOrderTakeProfitInput");
        }
        else
        {
            await JS.InvokeVoidAsync("disableInput", "#pendingOrderTakeProfitInput");
        }
    }

    private void PendingOrderTakeProfitChanged(ChangeEventArgs e)
    {
        if (e.Value is null || PendingOrder is null) return;

        PendingOrder.TakeProfitInPips = double.Parse(e.Value.ToString(), NumberStyles.Any, CultureInfo.InvariantCulture);
        PendingOrder.TakeProfitInPrice = default;
    }

    private void PendingOrderCommentChanged(ChangeEventArgs e)
    {
        if (e.Value is null || PendingOrder is null) return;

        PendingOrder.Comment = e.Value.ToString();
    }

    private async Task MarketOrderSymbolChanged(ChangeEventArgs e)
    {
        if (e.Value is null) return;

        var symbolName = e.Value.ToString();

        var symbol = Account.Symbols.FirstOrDefault(symbol => symbol.Name.Equals(symbolName, StringComparison.OrdinalIgnoreCase));

        if (symbol is not null)
        {
            MarketOrder.Symbol = symbol;
            MarketOrder.Volume = MarketOrder.Symbol.Data.MinVolume;

            await UpdateVolumeInputAttributes("#marketOrderVolumeInput", symbol);
            await JS.InvokeVoidAsync("setInputValue", "#marketOrderVolumeInput", MonetaryConverter.FromMonetary(MarketOrder.Volume));
        }
    }

    private void MarketOrderDirectionChanged(ChangeEventArgs e)
    {
        if (e.Value is null || MarketOrder is null) return;

        MarketOrder.TradeSide = e.Value.ToString().ToLowerInvariant() switch
        {
            "buy" => ProtoOATradeSide.Buy,
            "sell" => ProtoOATradeSide.Sell,
            _ => throw new ArgumentOutOfRangeException(e.Value.ToString())
        };
    }

    private void MarketOrderVolumeChanged(ChangeEventArgs e)
    {
        if (e.Value is null || MarketOrder is null) return;

        MarketOrder.Volume = MonetaryConverter.ToMonetary(double.Parse(e.Value.ToString(), NumberStyles.Any, CultureInfo.InvariantCulture));
    }

    private async Task MarketOrderMarketRangeStateChanged(ChangeEventArgs e)
    {
        if (e.Value is null || MarketOrder is null) return;

        MarketOrder.IsMarketRange = bool.Parse(e.Value.ToString());

        if (MarketOrder.IsMarketRange)
        {
            await JS.InvokeVoidAsync("enableInput", "#marketRangeInput");
            MarketOrder.BaseSlippagePrice = MarketOrder.Symbol.Bid;
        }
        else
        {
            await JS.InvokeVoidAsync("disableInput", "#marketRangeInput");
            MarketOrder.BaseSlippagePrice = default;
        }
    }

    private void MarketOrderMarketRangeChanged(ChangeEventArgs e)
    {
        if (e.Value is null || MarketOrder is null) return;

        MarketOrder.MarketRangeInPips = double.Parse(e.Value.ToString(), NumberStyles.Any, CultureInfo.InvariantCulture);
        MarketOrder.BaseSlippagePrice = MarketOrder.Symbol.Bid;
    }

    private async Task MarketOrderStopLossStateChanged(ChangeEventArgs e)
    {
        if (e.Value is null || MarketOrder is null) return;

        MarketOrder.IsStopLossEnabled = bool.Parse(e.Value.ToString());

        if (MarketOrder.IsStopLossEnabled)
        {
            await JS.InvokeVoidAsync("enableInput", "#marketOrderStopLossInput");
            await JS.InvokeVoidAsync("enableInput", "#marketOrderTrailingStopLoss");

        }
        else
        {
            await JS.InvokeVoidAsync("disableInput", "#marketOrderStopLossInput");
            await JS.InvokeVoidAsync("disableInput", "#marketOrderTrailingStopLoss");
        }
    }

    private void MarketOrderStopLossChanged(ChangeEventArgs e)
    {
        if (e.Value is null || MarketOrder is null) return;

        MarketOrder.StopLossInPips = double.Parse(e.Value.ToString(), NumberStyles.Any, CultureInfo.InvariantCulture);
        MarketOrder.StopLossInPrice = default;
    }

    private void MarketOrderTrailingStopChanged(ChangeEventArgs e)
    {
        if (e.Value is null || MarketOrder is null) return;

        MarketOrder.IsTrailingStopLossEnabled = bool.Parse(e.Value.ToString());
    }

    private async Task MarketOrderTakeProfitStateChanged(ChangeEventArgs e)
    {
        if (e.Value is null || MarketOrder is null) return;

        MarketOrder.IsTakeProfitEnabled = bool.Parse(e.Value.ToString());

        if (MarketOrder.IsTakeProfitEnabled)
        {
            await JS.InvokeVoidAsync("enableInput", "#marketOrderTakeProfitInput");
        }
        else
        {
            await JS.InvokeVoidAsync("disableInput", "#marketOrderTakeProfitInput");
        }
    }

    private void MarketOrderTakeProfitChanged(ChangeEventArgs e)
    {
        if (e.Value is null || MarketOrder is null) return;

        MarketOrder.TakeProfitInPips = double.Parse(e.Value.ToString(), NumberStyles.Any, CultureInfo.InvariantCulture);
        MarketOrder.TakeProfitInPrice = default;
    }

    private void MarketOrderCommentChanged(ChangeEventArgs e)
    {
        if (e.Value is null || MarketOrder is null) return;

        MarketOrder.Comment = e.Value.ToString();
    }

    private async Task UpdateVolumeInputAttributes(string inputId, SymbolModel symbol)
    {
        await JS.InvokeVoidAsync("setNumericInputAttributes", inputId, MonetaryConverter.FromMonetary(symbol.Data.MinVolume),
            MonetaryConverter.FromMonetary(symbol.Data.MaxVolume),
            MonetaryConverter.FromMonetary(symbol.Data.StepVolume));
    }

    private async Task SetInputsValues()
    {
        if (PendingOrder is not null)
        {
            await SetPendingOrderInputValues();
        }

        if (MarketOrder is not null)
        {
            await SetMarketOrderInputValues();
        }
    }

    private async Task SetPendingOrderInputValues()
    {
        await JS.InvokeVoidAsync("setInputValue", "#pendingOrderSymbolsList", PendingOrder.Symbol.Name);
        await UpdateVolumeInputAttributes("#pendingOrderVolumeInput", PendingOrder.Symbol);
        await JS.InvokeVoidAsync("setInputValue", "#pendingOrderVolumeInput", MonetaryConverter.FromMonetary(PendingOrder.Volume));
        await JS.InvokeVoidAsync("setInputValue", "#pendingOrderPriceInput", PendingOrder.Price);
        await JS.InvokeVoidAsync("setNumericInputAttributes", "#pendingOrderPriceInput", PendingOrder.Symbol.PipSize, null, PendingOrder.Symbol.PipSize);
        await JS.InvokeVoidAsync("setExpiryTimeMin");
        await JS.InvokeVoidAsync("setInputValue", "#pendingOrderDirectionList", PendingOrder.TradeSide == ProtoOATradeSide.Buy ? "Buy" : "Sell");
        await JS.InvokeVoidAsync("setAttr", "#pendingOrderStopLoss", "checked", PendingOrder.IsStopLossEnabled);

        if (PendingOrder.IsStopLossEnabled)
        {
            await JS.InvokeVoidAsync("setInputValue", "#pendingOrderStopLossInput", PendingOrder.StopLossInPips);
            await JS.InvokeVoidAsync("setAttr", "#pendingOrderTrailingStopLoss", "checked", PendingOrder.IsTrailingStopLossEnabled);
            await JS.InvokeVoidAsync("enableInput", "#pendingOrderStopLossInput");
            await JS.InvokeVoidAsync("enableInput", "#pendingOrderTrailingStopLoss");
        }
        else
        {
            await JS.InvokeVoidAsync("disableInput", "#pendingOrderStopLossInput");
            await JS.InvokeVoidAsync("disableInput", "#pendingOrderTrailingStopLoss");
        }

        await JS.InvokeVoidAsync("setAttr", "#pendingOrderTakeProfit", "checked", PendingOrder.IsTakeProfitEnabled);

        if (PendingOrder.IsTakeProfitEnabled)
        {
            await JS.InvokeVoidAsync("setInputValue", "#pendingOrderTakeProfitInput", PendingOrder.TakeProfitInPips);
            await JS.InvokeVoidAsync("enableInput", "#pendingOrderTakeProfitInput");
        }
        else
        {
            await JS.InvokeVoidAsync("disableInput", "#pendingOrderTakeProfitInput");
        }

        await JS.InvokeVoidAsync("setAttr", "#pendingOrderExpiry", "checked", PendingOrder.IsExpiryEnabled);

        if (PendingOrder.IsExpiryEnabled)
        {
            await JS.InvokeVoidAsync("enableInput", "#pendingOrderExpiryDateTime");
            await JS.InvokeVoidAsync("setInputValue", "#pendingOrderExpiryDateTime", PendingOrder.ExpiryTime.DateTime);
        }

        if (IsModifying)
        {
            await JS.InvokeVoidAsync("disableInput", "#pendingOrderSymbolsList");
            await JS.InvokeVoidAsync("disableInput", "#pendingOrderCommentTextarea");
            await JS.InvokeVoidAsync("disableInput", "#pendingOrderDirectionList");
            await JS.InvokeVoidAsync("disableInput", "#pendingOrderTypeList");
        }
        else
        {
            await JS.InvokeVoidAsync("enableInput", "#pendingOrderCommentTextarea");
            await JS.InvokeVoidAsync("enableInput", "#pendingOrderSymbolsList");
            await JS.InvokeVoidAsync("enableInput", "#pendingOrderDirectionList");
            await JS.InvokeVoidAsync("enableInput", "#pendingOrderTypeList");
        }
    }

    private async Task SetMarketOrderInputValues()
    {
        await JS.InvokeVoidAsync("setInputValue", "#marketOrderSymbolsList", MarketOrder.Symbol.Name);
        await UpdateVolumeInputAttributes("#marketOrderVolumeInput", MarketOrder.Symbol);
        await JS.InvokeVoidAsync("setInputValue", "#marketOrderVolumeInput", MonetaryConverter.FromMonetary(MarketOrder.Volume));
        await JS.InvokeVoidAsync("setInputValue", "#marketOrderDirectionList", MarketOrder.TradeSide == ProtoOATradeSide.Buy ? "Buy" : "Sell");
        await JS.InvokeVoidAsync("setAttr", "#marketRange", "checked", MarketOrder.IsMarketRange);
        await JS.InvokeVoidAsync("setInputValue", "#marketRangeInput", MarketOrder.MarketRangeInPips);
        await JS.InvokeVoidAsync("setAttr", "#marketOrderStopLoss", "checked", MarketOrder.IsStopLossEnabled);

        if (MarketOrder.IsStopLossEnabled)
        {
            await JS.InvokeVoidAsync("setInputValue", "#marketOrderStopLossInput", MarketOrder.StopLossInPips);
            await JS.InvokeVoidAsync("setAttr", "#marketOrderTrailingStopLoss", "checked", MarketOrder.IsTrailingStopLossEnabled);

            await JS.InvokeVoidAsync("enableInput", "#marketOrderStopLossInput");
            await JS.InvokeVoidAsync("enableInput", "#marketOrderTrailingStopLoss");
        }
        else
        {
            await JS.InvokeVoidAsync("disableInput", "#marketOrderStopLossInput");
            await JS.InvokeVoidAsync("disableInput", "#marketOrderTrailingStopLoss");
        }

        await JS.InvokeVoidAsync("setAttr", "#marketOrderTakeProfit", "checked", MarketOrder.IsTakeProfitEnabled);

        if (MarketOrder.IsTakeProfitEnabled)
        {
            await JS.InvokeVoidAsync("setInputValue", "#marketOrderTakeProfitInput", MarketOrder.TakeProfitInPips);

            await JS.InvokeVoidAsync("enableInput", "#marketOrderTakeProfitInput");
        }
        else
        {
            await JS.InvokeVoidAsync("disableInput", "#marketOrderTakeProfitInput");
        }

        if (IsModifying)
        {
            if (MarketOrder.IsMarketRange is false)
            {
                await JS.InvokeVoidAsync("disableInput", "#marketRange");
                await JS.InvokeVoidAsync("disableInput", "#marketRangeInput");
            }

            await JS.InvokeVoidAsync("disableInput", "#marketOrderSymbolsList");
            await JS.InvokeVoidAsync("disableInput", "#marketOrderCommentTextarea");
        }
        else
        {
            await JS.InvokeVoidAsync("enableInput", "#marketOrderSymbolsList");
            await JS.InvokeVoidAsync("enableInput", "#marketRange");
            await JS.InvokeVoidAsync("enableInput", "#marketOrderCommentTextarea");
        }
    }

    private async Task Execute()
    {
        if (IsModifying)
        {
            if (_isMarketTabActive)
            {
                ApiService.ModifyPosition(_actualMarketOrder, MarketOrder, Account.Id, Account.IsLive);

            }
            else
            {
                ApiService.ModifyOrder(_actualPendingOrder, PendingOrder, Account.Id, Account.IsLive);
            }
        }
        else
        {
            if (_isMarketTabActive)
            {
                ApiService.CreateNewOrder(MarketOrder, Account.Id, Account.IsLive);
            }
            else
            {
                ApiService.CreateNewOrder(PendingOrder, Account.Id, Account.IsLive);
            }
        }

        await Modal.Close();
    }

    private void MarketOrderTabActivated()
    {
        _isMarketTabActive = true;
    }

    private void PendingOrderTabActivated()
    {
        _isMarketTabActive = false;
    }

    private void OnClose()
    {
        IsModifying = false;

        MarketOrder = null;
        PendingOrder = null;
    }
}